import {
  createRouter,
  createWebHistory, // history
  createWebHashHistory, // hash
} from "vue-router";

import Layout from "../layout/index.vue";

// 分别暴露(可以写多个)
export const routes = [
  {
    // 路由路径
    path: "/",
    // 路由组件（路由懒加载加载组件）
    component: Layout,
    // 路由名称
    name: "Home",
    meta: { title: "首页" },
    children: [
      {
        path: "", // 没有路径，会自动补全父路由地址
        component: () => import("../views/home/index.vue"),
        meta: { title: "首页" },
        name: "Home",
      },
    ],
  },
  {
    // 路由路径
    path: "/course",
    // 路由组件（路由懒加载加载组件）
    component: Layout,
    // 路由名称
    name: "Course",
    meta: { title: "课程" },
    children: [
      {
        path: "",
        component: () => import("../views/course/index.vue"),
        name: "Course",
        meta: { title: "课程" },
        children: [
          {
            path: "frontend",
            component: () => import("../views/course/frontend/index.vue"),
            name: "Frontend",
            meta: { title: "前端" },
          },
          {
            path: "backend/:id",
            component: () => import("../views/course/backend/index.vue"),
            name: "Backend",
            meta: { title: "后端" },
          },
        ],
      },
    ],
  },
  {
    // 路由路径
    path: "/pins",
    // 路由组件（路由懒加载加载组件）
    component: Layout,
    // 路由名称
    name: "Pins",
    meta: { title: "沸点" },
    children: [
      {
        path: "",
        component: () => import("../views/pins/index.vue"),
        name: "Pins",
        meta: { title: "沸点" },
      },
    ],
  },
  {
    // https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html#%E6%8D%95%E8%8E%B7%E6%89%80%E6%9C%89%E8%B7%AF%E7%94%B1%E6%88%96-404-Not-found-%E8%B7%AF%E7%94%B1
    path: "/:pathMatch(.*)*", // 匹配任意地址
    redirect: "/",
    hidden: true, // 自己添加属性，目的将来遍历的时候根据这个属性决定是否要显示
  },
];

const router = createRouter({
  // 路由模式
  history: createWebHistory(),
  // 路由配置
  routes,
});

// 全局路由导航守卫
router.beforeEach((to, from, next) => {
  document.title = to.meta.title as string;
  next();
});

// router.afterEach(() => {})

// 默认暴露(只能写一个)
export default router;

// 引入方式：
// import router, { routes } from './xxx'
